<template>
  <div class="container">
    <el-card shadow="always">
      <el-form size="small" label-width="125px" :model="queryParams" ref="queryParams">
        <el-row>
          <el-col :span="24" :offset="0">
            <el-col :span="6" :offset="0">
              <el-form-item label="办案单位" label-width="100px">
                <el-input
                  v-model="queryParams.unit"
                  placeholder="请输入"
                  clearable
                  style="width: 220px"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="6" :offset="0"
              ><el-form-item label="采取强制措施日期">
                <el-date-picker
                  v-model="queryParams.ConstraintTime"
                  placeholder="请选择"
                  clearable
                ></el-date-picker> </el-form-item
            ></el-col>
            <el-col :span="6" :offset="0"
              ><el-form-item label="解除强制措施日期">
                <el-date-picker
                  v-model="queryParams.relieveConstraintTime"
                  placeholder="请选择"
                  clearable
                ></el-date-picker> </el-form-item
            ></el-col>
            <el-col :span="6" :offset="0"
              ><el-form-item label="入库时间" label-width="100px">
                <el-date-picker
                  v-model="queryParams.enertTime"
                  placeholder="请选择"
                  clearable
                ></el-date-picker> </el-form-item
            ></el-col>
          </el-col>
          <el-col :span="24" :offset="0">
            <el-col :span="6">
              <el-form-item label="已结案日期" label-width="100px">
                <el-date-picker
                  v-model="queryParams.caseClosedTime"
                  placeholder="请选择"
                  clearable
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="12">
              <el-form-item style="text-align: right">
                <el-button type="primary" size="medium" @click="search" :loading="loading"
                  >搜索</el-button
                >
                <el-button size="medium" @click=";(queryParams = {}), loadList()" :loading="loading"
                  >重置</el-button
                >
              </el-form-item></el-col
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div style="margin-top: 10px; margin-bottom: 10px">
      <el-button class="bg-color-2d" size="default" @click="handleExport">导出</el-button>
    </div>
    <el-card shadow="always">
      <div>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table align="center" type="selection"> </el-table>
          <el-table-column align="center" type="index" label="序号"> </el-table-column>
          <el-table-column align="center" prop="serialNum" label="编号"> </el-table-column>
          <el-table-column align="center" prop="name" label="物品名称"> </el-table-column>
          <el-table-column align="center" prop="type" label="物品类型"> </el-table-column>
          <el-table-column align="center" prop="count" label="数量"> </el-table-column>
          <el-table-column align="center" label="物品图片">
            <template slot-scope="scope">
              <image-preview :src="scope.row.deliverImg" :width="50" :height="50"></image-preview>
            </template>
          </el-table-column>
          <el-table-column align="center" label="入库图片">
            <template slot-scope="scope">
              <image-preview :src="scope.row.storeImg" :width="50" :height="50"></image-preview>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="phName" label="办案人员"></el-table-column>
          <el-table-column align="center" prop="wName" label="仓库"></el-table-column>
          <el-table-column align="center" prop="manager" label="仓库人员"></el-table-column>
          <el-table-column align="center" prop="createTime" label="登记时间">
            <template slot-scope="scope">
              {{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="remark" label="记录"></el-table-column>
        </el-table>
      </div>
    </el-card>

    <Pagination
      class="page-container"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="pageGetList"
    ></Pagination>
  </div>
</template>

<script>
import FormData from '@/components/FormData'
import { getList } from '@/api/property/putRecord'
export default {
  components: {
    FormData
  },
  data() {
    return {
      // 数据
      list: [],
      // 选择数据
      multipleSelection: [],
      loading: false,
      // 数据条数
      total: 0,
      // 分页查询
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    search() {
      this.loadList(this.queryParams)
    },
    // 获取数据
    loadList(queryForm = null) {
      // ${process.env.VUE_APP_BASE_API}
      // if (queryForm && queryForm.wId) queryForm.wIds = queryForm.wId
      this.loading = true
      getList(queryForm).then((res) => {
        res.rows.forEach((item) => {
          if (item.type) {
            switch (item.type) {
              case '1':
                item.type = '普通物品'
                break
              case '2':
                item.type = '特殊物品'
                break
              case '3':
                item.type = '车辆'
                break
            }
          }
        })
        this.list = [...res.rows]
        this.total = res.total
        this.loading = false
      })
    },
    // 分页查询
    pageGetList() {
      getList(this.queryParams).then((response) => {
        this.list = response.rows
        this.total = response.total
      })
    },
    // 财务登记事件
    registerDispose() {
      this.$router.push('/property/registry')
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 导出
    handleExport() {
      // {
      //     pageNum: 1,
      //     pageSize: this.total
      //   }
      this.download(
        'system/record/export',
        {
          ...this.queryParams
        },
        `出入库记录数据.xlsx`
      )
    }
  },
  created() {
    // 初始化数据
    this.loadList()
  }
}
</script>

<style scoped>
.container {
  padding: 15px;
}
</style>
